<!DOCTYPE html>
<html>
	
	<style>
		.day, .day-small{width:1280px; position:relative; left:0px;}
		
		.chart{width:1200px; height:340px; border:1px solid #ddd; overflow-x:hidden; float:left}
		
		.day-small{}
		
		.day-canvas, .day-background, .small-background{position:absolute; left:0px; top:0px;}
		
		.inner-day{position:relative; left:0px;}
		
		#price{margin-left:40px; }
		
		.graduation{width:38px; margin-right:2px; margin-top: 18px; height:300px; float:left; text-align:right; font-size:12px; line-height:30px;}
		
		.clear{clear:both; height:0px; width:100%;}
	</style>
<body>
	<div class="day">
		<div class="graduation">
			<div></div><div></div><div></div><div></div><div></div>
			<div></div><div></div><div></div><div></div>
		</div>
		
		<div class="chart">
			<div class="inner-day">
				<canvas id="background" width="8670" height="320" class="day-background"></canvas>
				<canvas id="myCanvas" width="8670" height="300" class="day-cancas"></canvas>
				<canvas id="myCanvas-history" width="8670" height="320" class="day-canvas"></canvas>
			</div>
		</div>
		
		<div class="clear"></div>
	</div>
	
	<div id="price">汇率：<span></span> &nbsp; 国际白银：<span></span> &nbsp; 纸白银：<span></span></div>
	<div class="day-small">
		<canvas id="small-background" width="8670" height="320" class="small-background"></canvas>
		<canvas id="interval-70" width="1280" height="320"></canvas>
	</div>
	
	<script type="text/javascript" src="../static/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../static/lib.js"></script>
	<script type="text/javascript">
		var day = LIB.getToday();
		var correctionValue = 0.015;
		
		$.get("../api.php?day="+day, function(text) {
			var lines = text.split("\n");
			var data= [], silvers = [], silvers70 = [], timeline = [], timeline70 = [];
			
			for(var i = 0, l = lines.length; i< l; i++) {
				var temp = lines[i].split("|");
				
				if(temp.length < 5) continue;
				// data.push(temp);
				
				if(temp[1]%70 == 0) {
					silvers70.push(temp[4]*1000);
					timeline70.push(temp[1]);
				}
				silvers.push(temp[4]*1000);
				timeline.push(temp[1]);
			}
			
			window.silvers = silvers;
			window.timeline = timeline;
			window.silvers70 = silvers70;
			window.timeline70 = timeline70;
			
			drawLine("myCanvas", silvers, timeline, {color:"#00cc00"});
			drawLine("interval-70", silvers70, timeline70, {color:"#00cc00", interval:7});
			
			setDayLeft();
			setGraduation(window.silvers);
			setInterval(function() {
				updateData();
			}, 1000*10);
		});
		
		drawBackground();
		
		// 绘制 线条
		function drawLine(canvasId, points, timeline, op) {
			op.interval = op.interval || 1;
			op.pix = getPix(points);
			op.min = LIB.arrayMin(points);
		
			var c=document.getElementById(canvasId);
			var ctx=c.getContext("2d");
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = op.color;
			ctx.lineJoin = "round";
			
			ctx.moveTo(getX(timeline[0], op.interval), getY(points[0], op));
			for(var i = 0, l = points.length; i < l; i++) {
				ctx.lineTo(getX(timeline[i], op.interval), getY(points[i], op));
			}
			ctx.stroke();
		}
		
		// 根据时间戳 和 间隔， 获取X 坐标
		function getX(timeline, interval) {
			return ((timeline / 10 + 8 * 360) % 8640) / interval;
		}
		
		// 根据 点值，min，pix 获取Y坐标
		function getY(p, op) {
			return 300 - (p - op.min) * op.pix - 30;
		}
		
		// 获取比例
		var _pix = 0;
		function getPix(arr) {
			return ( 240 / (LIB.arrayMax(arr) - LIB.arrayMin(arr)) ).toFixed(2);
		}
		
		// 清空画布
		function clearCanvas(canvasId) {
			var c = document.getElementById(canvasId);
			var ctx=c.getContext("2d");
			ctx.clearRect(0, 0, c.width, c.height);
		}
		
		// 绘制背景
		function drawBackground(canvasId) {
			var c = document.getElementById('background'),
				ctx = c.getContext("2d");
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = "#000";
			ctx.lineJoin = "round";
			ctx.font = "12px";
			
			var start_x = 0.5;
			
			ctx.moveTo(0, 300.5);
			ctx.lineTo(8670, 300.5);
			ctx.stroke();
			
			ctx.fillText(0, 2, 312);
			
			ctx.beginPath();
			ctx.strokeStyle = "#ccc";
			for(var i = 1; i < 24; i++) {
				var _x = start_x+(8640/24)*i;
				
				ctx.fillText(i, _x-4, 312);
				
				ctx.moveTo(_x, 300);
				ctx.lineTo(_x, 0);
				ctx.stroke();
			}
			
			ctx.beginPath();
			ctx.strokeStyle = "#ccc";
			var start_y = 0.5;
			for(var i = 1; i < 10; i++) {
				var _y = start_y+(300/10)*i;
				
				for(var j = 0; j < 8640; j+=3) {
					ctx.moveTo(j, _y);
					j += 5;
					ctx.lineTo(j, _y);
					ctx.stroke();
				}
			}
		}
		
		function setGraduation(arr) {
			var min = LIB.arrayMin(arr)/1000,
				max = LIB.arrayMax(arr)/1000,
				poor = (max - min) / 8;
				
			max = max - correctionValue;

			$(".graduation div").each(function() {
				$(this).html(max.toFixed(3));
				max -= poor;
			});
		}
		
		var lastS70 = 0;
		// 更新数据
		function updateData() {
			$.get("../api.php", function(text) {
				var temp = text.split("|");
				
				if(temp.length < 5) return;
				
				$("#price span:eq(0)").html(temp[2]);
				$("#price span:eq(1)").html(temp[3]);
				$("#price span:eq(2)").html((temp[4] - correctionValue).toFixed(3));
				
				var len = window.silvers70.length - 1;
				if(temp[1]%70 == 0) {
					if(lastS70) window.silvers70[len] = lastS70;
				
					lastS70 = temp[4]*1000;
					window.silvers70.push(temp[4]*1000);
					window.timeline70.push(temp[1]);
				} else {
					if(!lastS70) lastS70 = window.silvers70[len];
					
					window.silvers70[len] = temp[4]*1000;
				}
				window.silvers.push(temp[4]*1000);
				window.timeline.push(temp[1]);

				clearCanvas('myCanvas');
				clearCanvas('interval-70');
				drawLine("myCanvas", window.silvers, window.timeline, {color:"#00cc00"});
				drawLine("interval-70", window.silvers70, window.timeline70, {color:"#00cc00", interval:7});
				
				setDayLeft();
				setGraduation(window.silvers);
			});
		}
		
		
		function setDayLeft() {
			var date = new Date,
				l = getX(date.getTime()/1000, 1),
				p = 800;
			
			if(l < p) l = 0;
			else if((l + p) > 8640) l = 8640-1200;
			else l -= p;
			
			$(".inner-day").css({left: -l+"px"});
		}
		
	</script>
</body>
</html>